// 商品分组
// 商品分组
<template>
  <div class="frame">
    <el-button type="primary" class="issue">新建商品分组</el-button>

    <!-- 搜索 -->
    <el-input placeholder="请输入内容" v-model="input4" class="search">
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>

    <!-- 表格 -->
    <div class="biaoge">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="grouping" label="分组名称" width="180">
        </el-table-column>
        <el-table-column prop="shuliang" label="商品数" width="180">
        </el-table-column>
        <el-table-column prop="time" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="operation" label="操作"> </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>
<style >
.frame {
  width: 100%;
  height: 760px;
  left: 210px;
  top: 60px;
  color: rgba(80, 80, 80, 1);
  background-color: rgba(255, 255, 255, 1);
  font-size: 14px;
  line-height: 150%;
  border: rgba(229, 229, 229, 1) solid 1px;
  text-align: center;
  margin-top: 10px;
}
/* 发布按钮 */
.issue {
  float: left;
  margin-left: 30px;
  margin-top: 30px;
}
/* 搜索 */
.search {
  float: right;
  margin-top: 30px;
  width: 200px;
  margin-right: 50px;
}
/* 表格 */
.biaoge div.cell {
  margin-left: 100px;
}

/* 分页 */
.paging {
  margin-top: 60px;
}
</style>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          grouping: <el-button type="text">食品</el-button>,
          shuliang: "99",
          time: "2022/6/7 10.20.08",
          operation: (
            <el-button-group>
              <el-button type="text">编辑</el-button>{" "}
              <el-button type="text">推广商品</el-button>
            </el-button-group>
          ),
        },
        {
          grouping: <el-button type="text">衣服</el-button>,
          shuliang: "99",
          time: "2022/6/7 10.20.08",
          operation: (
            <el-button-group>
              <el-button type="text">编辑</el-button>{" "}
              <el-button type="text">推广商品</el-button>
            </el-button-group>
          ),
        },
        {
          grouping: <el-button type="text">裤子</el-button>,
          shuliang: "99",
          time: "2022/6/7 10.20.08",
          operation: (
            <el-button-group>
              <el-button type="text">编辑</el-button>{" "}
              <el-button type="text">推广商品</el-button>
            </el-button-group>
          ),
        },
        {
          grouping: <el-button type="text">鞋子</el-button>,
          shuliang: "99",
          time: "2022/6/7 10.20.08",
          operation: (
            <el-button-group>
              <el-button type="text">编辑</el-button>{" "}
              <el-button type="text">推广商品</el-button>
            </el-button-group>
          ),
        },
        {
          grouping: <el-button type="text">帽子</el-button>,
          shuliang: "99",
          time: "2022/6/7 10.20.08",
          operation: (
            <el-button-group>
              <el-button type="text">编辑</el-button>{" "}
              <el-button type="text">推广商品</el-button>
            </el-button-group>
          ),
        },
      ],
    };
  },
};
</script>